<template>
  <div
    class="pb-2 h-full grid grid-cols-7 gap-2"
    v-if="Data"
  >
    <section class="col-span-2">
      <div class="grid grid-rows-3 h-full gap-2">
        <!-- 发案类型占比 -->
        <div class="bg-slate-800/50 p-3 h-full">
          <FaAnLeiXing :data="Data.faAnLeiXing"></FaAnLeiXing>
        </div>
        <!-- 受骗人群占比 -->
        <div class="bg-slate-800/50 p-3 h-full">
          <ShouPianRenQun :data="Data.shouPianRenQun"></ShouPianRenQun>
        </div>
        <!-- 损失数占比 -->
        <div class="bg-slate-800/50 p-3 h-full">
          <Sunshishu :data="Data.sunShiShu"></Sunshishu>
        </div>
      </div>
    </section>
    <section class="col-span-3">
      <div class="grid grid-rows-3 h-full gap-2">
        <!-- 数据展示区 -->
        <div class="row-span-1 bg-slate-800/50 p-3 h-full">
          <TotalData :data="Data.totalData"></TotalData>
        </div>
        <!-- 地理信息展示区 -->
        <div class="row-span-2 bg-slate-800/50 p-3 h-full"></div>
      </div>
    </section>
    <section class="col-span-2">
      <div class="grid grid-rows-3 h-full gap-2">
        <!-- 辖区发案占比区 -->
        <div class="bg-slate-800/50 p-3 h-full">
          <FaAnXiaQu :data="Data.faAnXiaQu"></FaAnXiaQu>
        </div>
        <!-- 社情展示区 -->
        <div class="bg-slate-800/50 p-3 h-full"></div>
        <!-- 访情展示区-->
        <div class="bg-slate-800/50 p-3 h-full"></div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import homeApi, { type MainPage } from "@/apis/homeApi";
import { ElMessageBox } from "element-plus";
import TotalData from "@/components/front/home/TotalData.vue";
import FaAnLeiXing from "@/components/front/home/FaAnLeiXing.vue";
import ShouPianRenQun from "@/components/front/home/shouPianRenQun.vue";
import FaAnXiaQu from "@/components/front/home/FaAnXiaQu.vue";
import Sunshishu from "@/components/front/home/Sunshishu.vue";

const Data = ref<MainPage>();

onMounted(async () => {
  await homeApi
    .getMainPage()
    .then((res) => {
      if (res.code === 200) {
        Data.value = res.result;
      } else {
        ElMessageBox.alert("网络请求失败,请联系管理员" + res.message);
      }
    })
    .catch((error) => {
      ElMessageBox.alert("网络请求失败,请联系管理员" + error);
    });
});
</script>

<style scoped lang="scss"></style>

<script lang="ts">
export default {
  route: { meta: { auth: true } },
};
</script>
